<script setup lang="ts">
import HeaderNav from "@/components/common/HeaderNav.vue";
// import Photo from '@/views/portal/Photo.vue';
</script>

<template>
  <div class="box">
    <HeaderNav />
    <div class="main">
      <div class="content">
        <div class="content-item">
          <img src="@/assets/jpg/1.jpg" alt="photo" />
          <span @click="$router.push('/home')"
            >Photos
            <icon-arrow-circle-right
              theme="outline"
              size="0.18rem"
              fill="#333"
            />
          </span>
        </div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
      </div>
      <router-view v-slot="{ Component }">
        <transition name="router_animate">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$item-height: 0.36rem;
$item-width: 0.6rem;
$a-font-size: 0.08rem;
span {
  cursor: pointer;
}

.box {
  height: auto;
  width: 100%;
  margin: 0 0;

  .main {
    // height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #d7d8ce;

    .content {
      position: fixed;
      top: $item-height;
      left: $item-height * 3;
      width: $item-width * 13;
      height: $item-height * 13;
      // background-color: rgb(53, 80, 53);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      .content-item {
        width: $item-width * 6;
        height: $item-height * 6;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: $item-width * 0.1 $item-width * 0.1 $item-width * 0.1
          #888888;

        img {
          height: $item-height * 4;
          width: $item-width * 4;
        }

        span {
          height: $item-height * 0.5;
          font-size: $a-font-size;
          display: flex;
          align-items: center;
        }
      }
    }
  }
}

.router_animate-enter-active {
  animation: backInDown 1s;
}

.router_animate-leave-active {
  animation: backOutDown 0.6s;
}
</style>
